﻿@{
    ViewData["Title"] = "首页";
}

<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
    <!--侧滑菜单部分-->
    <aside id="offCanvasSide" class="mui-off-canvas-left">
        <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <div class="title">易多帮导航</div>
                <div class="content">
                    <p style="margin: 10px 15px;">
                        <button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭导航菜单</button>
                    </p>
                </div>
                <div class="title" style="margin-bottom: 25px;">菜单</div>
                <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted" id="menu">
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right" href="/">
                            首页
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right" href="GoodsClass.html">
                            商品分类
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right" href="ShopList.html">
                            旺铺街
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right" href="setting.html">
                            个人中心
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right" href="/User/Reg">
                            注册
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right" href="/User/Login">
                            登录
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right" href="/User/Reg">
                            问题反馈
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right" href="setting.html">
                            关于我们
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </aside>
    <!--主界面部分-->
    <div class="mui-inner-wrap">
        <header class="mui-bar mui-bar-nav">
            <a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
            <a href="Seach.html" class="mui-pull-right"><span class="mui-icon mui-icon-search"></span></a>
        </header>
        <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper" style="background-color:#fff">
            <div class="mui-scroll">
                <!--轮播图--->
                <div id="slider" class="mui-slider">
                    <div class="mui-slider-group mui-slider-loop">
                        <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                        <div class="mui-slider-item mui-slider-item-duplicate">
                            <a href="#">
                                <img src="/img/banner.jpg" style=" width:100%;height:200px;">
                            </a>
                        </div>
                        <!-- 第一张 -->
                        <div class="mui-slider-item">
                            <a href="#">
                                <img src="/img/banner.jpg" style=" width:100%;height:200px;">
                            </a>
                        </div>
                        <!-- 第二张 -->
                        <div class="mui-slider-item">
                            <a href="#">
                                <img src="/img/banner2.jpg" style=" width:100%;height:200px;">
                            </a>
                        </div>
                        <!-- 第三张 -->
                        <div class="mui-slider-item">
                            <a href="#">
                                <img src="/img/banner3.jpg" style=" width:100%;height:200px;">
                            </a>
                        </div>
                        <!-- 第四张 -->
                        <div class="mui-slider-item">
                            <a href="#">
                                <img src="/img/banner4.png" style=" width:100%;height:200px;">
                            </a>
                        </div>
                        <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                        <div class="mui-slider-item mui-slider-item-duplicate">
                            <a href="#">
                                <img src="/img/banner1.jpg" style=" width:100%;height:200px;">
                            </a>
                        </div>
                    </div>
                    <div class="mui-slider-indicator">
                        <div class="mui-indicator mui-active"></div>
                        <div class="mui-indicator"></div>
                        <div class="mui-indicator"></div>
                        <div class="mui-indicator"></div>
                    </div>
                </div>
                <!--导航菜单--->
                <div id="Gallery" class="mui-slider" >
				<div class="mui-slider-group">
					<div class="mui-slider-item">
						  <ul class="mui-table-view mui-grid-view mui-grid-12 pattern-con-icon">
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="examples/new-commodity.html">
		                    <img src="images/icon-item-009.png" width="40" height="70"/>
		                    <div class="mui-media-body" style="margin-top:-5px ;">淘货源</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="examples/new-commodity.html">
		                    <img src="images/icon-item-007.png" width="40" height="70"/>
		                    <div class="mui-media-body" style="margin-top:-5px ;">微商代发</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="examples/new-commodity.html">
		                    <img src="images/icon-item-008.png" width="40" height="70"/>
		                    <div class="mui-media-body" style="margin-top:-5px ;">品牌站</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="examples/new-commodity.html">
		                     <img src="images/icon-item-009.png" width="40" height="70"/>
		                    <div class="mui-media-body" style="margin-top:-5px ;">拼团</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="examples/new-commodity.html">
		                    <img src="images/icon-item-009.png" width="40" height="70"/>
		                    <div class="mui-media-body" style="margin-top:-5px ;">挑货</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="examples/new-commodity.html">
		                    <img src="images/010.png" width="40" height="70"/>
		                    <div class="mui-media-body" style="margin-top:-5px ;">男装</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="examples/new-commodity.html">
		                    <img src="images/010.png" width="40" height="70"/>
		                    <div class="mui-media-body" style="margin-top:-5px ;">女装</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="examples/new-commodity.html">
		                     <img src="images/010.png" width="40" height="70"/>
		                    <div class="mui-media-body" style="margin-top:-5px ;">分类</div></a></li>
		            </ul> 
					</div>
					<div class="mui-slider-item">
						 <ul class="mui-table-view mui-grid-view mui-grid-12 pattern-con-icon">
		                <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="examples/new-commodity.html">
		                    <img src="images/010.png" width="50" height="70"/>
		                    <div class="mui-media-body"  style="margin-top:-5px ;">更多</div></a></li>
		        </ul> 
					</div>

				</div>
			</div>
                <div class="mui-content">
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="img/banner-003.jpg" style=" width:100%;height:150px;">
                        </a>
                    </div>
                </div>
                <link rel="stylesheet" type="text/css" href="css/buttons.css" />
                <div class="mui-content mui-btn mui-btn-block">
                    <ul class="mui-table-view mui-grid-view mui-grid-9" style="background-color:#fff">
                        @*@{ 
                            string[] bgcolors = new string[5] { "button-royal", "layui-bg-orange", "layui-bg-green", "layui-bg-blue", "" };
                        }*@
                        @foreach (var item in ViewBag.Market)
                        {
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3 ">
                                <a href="/Market/Index/@item.Id" class="button button-glow button-rounded button-royal" style="color:azure;">
                                    <i class="fa fa-group"></i>
                                    @item.MarketName
                                </a>
                            </li>
                        }
                        @*<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3 ">
                            <a class="button button-glow button-rounded button-royal" style="color:azure;">
                                <i class="fa fa-group"></i>
                                锦荣商贸
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                            <a class="button button-glow button-rounded button-highlight" style="color:azure;">
                                <i class="fa fa-share-alt"></i>
                                银基商贸
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                            <a class="button button-glow button-rounded button-caution" style="color:azure;">
                                <i class="fa fa-rss"></i>
                                大观国贸
                            </a>
                        </li>*@
                    </ul>
                </div>
                <div class="mui-content" style="background-color:#fff">
                    <button type="button" class="mui-btn mui-btn-block  mui-btn-outlined">
                        <span class="mui-pull-left">热门店铺</span>
                    </button>
                    <ul class="mui-table-view mui-grid-view">
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/shuijiao.jpg">
                                <div class="mui-media-body">幸福就是可以一起睡觉</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/muwu.jpg">
                                <div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/cbd.jpg">
                                <div class="mui-media-body">Color of SIP CBD</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/yuantiao.jpg">
                                <div class="mui-media-body">静静看这世界</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/shuijiao.jpg">
                                <div class="mui-media-body">幸福就是可以一起睡觉</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/muwu.jpg">
                                <div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/cbd.jpg">
                                <div class="mui-media-body">Color of SIP CBD</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/yuantiao.jpg">
                                <div class="mui-media-body">静静看这世界</div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="mui-content">
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="img/banner-001.jpg" style=" width:100%;height:150px;">
                        </a>
                    </div>
                </div>
                <div class="mui-content" style="background-color:#fff">
                    <button type="button" class="mui-btn mui-btn-block  mui-btn-outlined">
                        <span class="mui-pull-left">工业品牌推荐</span>
                    </button>
                    <ul class="mui-table-view mui-grid-view">
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/shuijiao.jpg">
                                <div class="mui-media-body">幸福就是可以一起睡觉</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/muwu.jpg">
                                <div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/cbd.jpg">
                                <div class="mui-media-body">Color of SIP CBD</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/yuantiao.jpg">
                                <div class="mui-media-body">静静看这世界</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/shuijiao.jpg">
                                <div class="mui-media-body">幸福就是可以一起睡觉</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/muwu.jpg">
                                <div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/cbd.jpg">
                                <div class="mui-media-body">Color of SIP CBD</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/yuantiao.jpg">
                                <div class="mui-media-body">静静看这世界</div>
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="mui-content" style="background-color:#fff">
                    <button type="button" class="mui-btn mui-btn-block  mui-btn-outlined">
                        <span class="mui-pull-left">好商推荐</span>
                    </button>
                    <ul class="mui-table-view mui-grid-view">
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/shuijiao.jpg">
                                <div class="mui-media-body">幸福就是可以一起睡觉</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/muwu.jpg">
                                <div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/cbd.jpg">
                                <div class="mui-media-body">Color of SIP CBD</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/yuantiao.jpg">
                                <div class="mui-media-body">静静看这世界</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/shuijiao.jpg">
                                <div class="mui-media-body">幸福就是可以一起睡觉</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/muwu.jpg">
                                <div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/cbd.jpg">
                                <div class="mui-media-body">Color of SIP CBD</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/yuantiao.jpg">
                                <div class="mui-media-body">静静看这世界</div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="mui-content">
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="img/icon-ad-001.png" style=" width:100%;height:80px;">
                        </a>
                    </div>
                </div>
                <div class="mui-content" style="background-color:#fff">
                    <button type="button" class="mui-btn mui-btn-block  mui-btn-outlined">
                        <span class="mui-pull-left">猜你喜欢</span>
                    </button>
                    <ul class="mui-table-view mui-grid-view">
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/shuijiao.jpg">
                                <div class="mui-media-body">幸福就是可以一起睡觉</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/muwu.jpg">
                                <div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/cbd.jpg">
                                <div class="mui-media-body">Color of SIP CBD</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/yuantiao.jpg">
                                <div class="mui-media-body">静静看这世界</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/shuijiao.jpg">
                                <div class="mui-media-body">幸福就是可以一起睡觉</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/muwu.jpg">
                                <div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/cbd.jpg">
                                <div class="mui-media-body">Color of SIP CBD</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="images/yuantiao.jpg">
                                <div class="mui-media-body">静静看这世界</div>
                            </a>
                        </li>
                    </ul>
                </div>

                <ul class="mui-table-view">
                    <li class="mui-table-view-cell" style="text-align: center;">
                        <a>技术支持-易多帮所有</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- off-canvas backdrop -->
        <div class="mui-off-canvas-backdrop"></div>
    </div>
</div>
<nav class="mui-bar mui-bar-tab" id="menuList">
    <a class="mui-tab-item mui-active" href="/">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" href="/Goods/GoodsClass">
        <span class="mui-icon mui-icon-extra mui-icon-extra-class"></span>
        <span class="mui-tab-label">分类</span>
    </a>
    <a class="mui-tab-item" href="/Goods/ShopList">
        <span class="mui-icon mui-icon-extra mui-icon-extra-gift"></span>
        <span class="mui-tab-label">挑货</span>
    </a>
    <a class="mui-tab-item" href="/MerchantInfo">
        <span class="mui-icon mui-icon-extra mui-icon-extra-peoples"></span>
        <span class="mui-tab-label">我的</span>
    </a>
</nav>
<script>
    mui.init();
    //侧滑容器父节点
    var offCanvasWrapper = mui('#offCanvasWrapper');
    //主界面容器
    var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
    //菜单容器
    var offCanvasSide = document.getElementById("offCanvasSide");
    //移动效果是否为整体移动
    var moveTogether = false;
    //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
    var classList = offCanvasWrapper[0].classList;
    classList.add('mui-scalable');

    //主界面‘显示侧滑菜单’按钮的点击事件

    //菜单界面，‘关闭侧滑菜单’按钮的点击事件
    document.getElementById('offCanvasHide').addEventListener('tap', function () {
        offCanvasWrapper.offCanvas('close');
    });
    //主界面和侧滑菜单界面均支持区域滚动；
    mui('#offCanvasSideScroll').scroll();
    mui('#offCanvasContentScroll').scroll();
    //实现ios平台原生侧滑关闭页面；
    if (mui.os.plus && mui.os.ios) {
        mui.plusReady(function () { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
            plus.webview.currentWebview().setStyle({
                'popGesture': 'none'
            });
        });
    }
    mui('#menu').on('tap', 'li a', function () {
        // 获取地址
        var href = this.getAttribute('href');
        // 方法一：
        location.href = href;
    })
    mui('#menuList').on('tap', 'a', function () {
        // 获取地址
        var href = this.getAttribute('href');
        // 方法一：
        location.href = href;
    });
    mui('header.mui-bar').on('tap', 'a', function () {
        // 获取地址
        var href = this.getAttribute('href');
        // 方法一：
        location.href = href;
    })
</script>

